Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Sheets
We can use the v-sheets component to add containers for content in our app.
For example, we can write:
<template>
<v-container>
<v-row justify="space-around">
<v-col v-for="elevation in elevations" :key="elevation" cols="12" md="4">
<v-sheet class="pa-12" color="grey lighten-3">
<v-sheet :elevation="elevation" class="mx-auto" height="100" width="100"></v-sheet>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
elevations: [12, 24],
}),
};
</script>
to add our sheets with various levels of shadows.
Tile
The tile property makes the sheet rectangular:
<template>
<v-container>
<v-row justify="space-around">
<v-col>
<v-sheet class="pa-12" color="grey lighten-3">
<v-sheet tile class="mx-auto" height="100" width="100"></v-sheet>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Colors and Sizes
We can change the color and size of the sheet.
For example, we can write:
<template>
<v-container>
<v-row class="flex-child">
<v-col class="d-flex" cols="12">
<v-sheet class="d-flex" color="grey lighten-3" height="100">
<sheet-footer>lorem ipsum</sheet-footer>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a sheet with a gray background and height 100px.
Skeleton Loaders
The v-skeleton-loader component lets us provide an indication that something is loading.
For example, we can use it by writing:
<template>
<v-container class="grey">
<v-row justify="center">
<v-col class="mb-12" cols="12" md="4">
<v-skeleton-loader
:loading="loading"
:transition="transition"
height="94"
type="list-item-two-line"
>
<v-card>
<v-card-title>Title</v-card-title>
<v-card-text>Card Text</v-card-text>
</v-card>
</v-skeleton-loader>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
loading: true,
transition: "scale-transition",
}),
};
</script>
We have the v-skeleton-loader component to add the skeleton loader.
The loading prop can be set to loading state.
And transition is the name of the transition we want to show.
Snackbars
A snackbar lets us show a message to the user.
Snackbars can be positioned and the delay can be removed.
To add it, we add the v-snackbar component:
<template>
<div class="text-center">
<v-btn dark color="red darken-2" @click="snackbar = true">Open Snackbar</v-btn>
<v-snackbar v-model="snackbar" :multi-line="multiLine">
{{ text }}
<template v-slot:action="{ attrs }">
<v-btn color="red" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
</template>
</v-snackbar>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
multiLine: true,
snackbar: false,
text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a neque arcu. Phasellus ac tincidunt elit. I",
}),
};
</script>
We have the v-snackbar component which is triggered by the v-btn .
The snackbar state controls the open state of the snackbar.
In the v-snackbar , we pass in the attrs to the props of the v-btn so that it can be used as a snackbar button.
We set snackbar to false when we click it so that it can be closed.
The multi-line prop makes it display text in multiple lines.
Conclusion
We can use sheets as container for content.
Snackbars let us display messages.
Skeleton loaders are useful for displaying a loading indicator.
